<template>
  <div>
    <van-nav-bar left-text="修改密码" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-field v-model="upwd" label="原密码" placeholder="请输入" />
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="newPwd" label="新密码" placeholder="请输入" />
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="newPwd2" label="再次确认" placeholder="请输入" />
    </van-cell-group>
    <button @click="setPwd">确定</button>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Field, Toast } from "vant";
import CryptoJs from "crypto-js";
import storage from "@/utils/Storage";
import httpApi from "@/http";

Vue.use(NavBar);
Vue.use(Field);
export default {
  data() {
    return {
      upwd: "",
      newPwd: "",
      newPwd2: "",
    };
  },
  methods: {
    setPwd() {
      let t = /\w{6,15}/.test(this.newPwd) && /\w{6,15}/.test(this.newPwd2);
      if (t) {
        let uPwd = CryptoJs.MD5(this.upwd).toString();
        let oldPwd = storage.get(storage.KEY_USER).upwd;
        if (this.newPwd == this.newPwd2 && uPwd == oldPwd) {
          let phone = storage.get(storage.KEY_USER).phone;
          httpApi.userApi.setupwd({ phone, upwd: this.newPwd }).then((res) => {
            console.log("密码修改", res);
            httpApi.userApi
              .userCount({ uid: storage.get(storage.KEY_USER).uid })
              .then((res) => {
                storage.set(storage.KEY_USER, res.data.data[0]);
                Toast({
                  message: "修改成功",
                  position: "bottom",
                  duration: 1000,
                });
              });
          });
        } else {
          Toast({
            message: "原密码错误或新密码两次输入不一样",
            position: "bottom",
            duration: 1000,
          });
        }
      } else {
        Toast({
          message: "请输入6~15位的密码",
          position: "bottom",
          duration: 1000,
        });
      }
    },

    onClickLeft() {
      this.$router.push("/my/setup");
    },
  },
};
</script>

<style scoped>
.van-nav-bar__content {
  height: 50px;
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}

::v-deep .van-nav-bar__text {
  color: black;
  margin-left: 10px;
}
.van-cell {
  height: 50px;
}
button {
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  height: 50px;
  margin-top: 50px;
  color: #7f7f7f;
  background-color: #f7f7f7;
}
</style>
